<template>
<div :id="id" :class="className" :style="{ height: height, width: width }" ></div>
</template>

<script>
import * as echarts from 'echarts'
import resize from './mixin/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    id: {
      type: String,
      default: 'chart123'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    chartData: {
      type: Array,
      default: []
    },
    chartRiqi: {
      type: Array,
      default: []
    },
    titleText: {
      type: String, 
    },
    // chartRefreshInterval: null
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {

    this.initChart();
    console.log('tuneibuRiqi', this.chartRiqi)
  //   this.chartRefreshInterval = setInterval(() => {
  //     console.log('Refreshing chart at: ', new Date()); // 打印当前时间
  //     this.initChart(); // 每30秒刷新一次图表
  // }, 30000); // 设置定时器间隔为30秒
},
  beforeDestroy() {
    
    // clearInterval(this.chartRefreshInterval); // 清除定时器
    
  },
  // beforeDestroy() {
  //   if (!this.chart) {
  //     return
  //   }
  //   this.chart.dispose()
  //   this.chart = null
  // },
  watch:{
    chartData: {
      handler(newValue, oldValue) {
        // this.chartRiqi = newValue;  //把新值赋值给我们的属性数据
        this.chartData = newValue
        this.initChart();  //刷新echarts图表
      },
      deep: true
    },
    chartRiqi: {
      handler(newValue, oldValue) {
        // this.chartRiqi = newValue;  //把新值赋值给我们的属性数据
        this.chartRiqi = newValue
        this.initChart();  //刷新echarts图表
        console.log('tuneibuRiqi', this.chartRiqi)
      },
      deep: true
    }
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id))
      // const xData = (function() {
      //   const data = []
      //   for (let i = 1; i < 13; i++) {
      //     data.push(i + 'month')
      //   }
      //   return data
      // }())
      this.chart.setOption({
      xAxis: {
        name: "单位（年月日）",
        type: 'category',
        // data: this.chartRiqi
        data: this.chartRiqi,
        boundaryGap: false,
      },
      yAxis: {
        type: 'value',
        name: "单位（mm）",
        // interval:1, // 步长
      },
      dataZoom: [{
        show: true,
        height: 20,
        xAxisIndex: [
          0
        ],
        bottom: 30,
        start: 10,
        end: 80,
        handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
        handleSize: '110%',
        handleStyle: {
          color: '#d3dee5'

        },
        textStyle: {
          color: '#fff' },
        borderColor: '#90979c'

      }, 
      {
        type: 'inside',
        show: true,
        height: 15,
        start: 1,
        end: 35
      }],
      toolbox: {
              feature: {
                saveAsImage: {},
                magicType: { show: true, type: ['line', 'bar'] },
                dataView: { show: true, readOnly: false }// 数据视图打开并允许编辑
              }
            },
      tooltip : {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
          title: [
            {
              left: 'center',
              text: this.titleText,
              textStyle: {
                fontSize: '10px'
              }
            }
          ],
      series: [
        {
          data: this.chartData,
          // data: [150, 230, 224, 218, 135, 147, 260],
          type: 'line'
        }
      ]})
    }
  }
}
</script>
